<template>
  <div class="article-area">
    <div class="title">{{info.title}}</div>
    <div class="createTime">
      <span>创建时间: {{formatTime(info.createAt)}}</span>
      <span>更新时间: {{formatTime(info.updateAt)}}</span>  
    </div>
    <div class="text-area">{{contentInfo}}</div>
    <div class="goRead" @click="handReadClick(info.id)">阅读全文</div>
  </div>
</template>

<script setup>
  import { computed } from "vue"
  import { useRouter } from "vue-router"
  import { formatTime } from "../../utils/formatTime"
  // 页面数据 
  const router = useRouter()
  const props = defineProps({
    info: {
      type: Object,
      default: {}
    }
  })
  const contentInfo = computed(() => {
    const { content } = props.info
    return content.substr(0, 100) + "......"
  })
  // 时间处理
  const handReadClick = (id) => {
    router.push({ path: `/weblog/${id}` })
  }
</script>

<style scoped>
.article-area {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 760px;
  height: 400px;
  margin: 10px auto;
  background-color: white;
  padding: 40px 30px;
  box-sizing: border-box;
  box-shadow: 0 0 10px #666;
}

.title {
  text-align: center;
  font-size: 30px;
  color: #666666;
}

.createTime {
  text-align: center;
  font-size: 14px;
  color: #b4b4b4;
}

.createTime span {
  margin: 0 10px;
}

.text-area {
  font-size: 16px;
  color: #686868;
}

.goRead {
  width: 100px;
  border: 1px solid #666666;
  color: #747474;
  text-align: center;
  margin: 0 auto;
  padding: 6px;
  user-select: none;
  cursor: pointer;
}

.goRead:hover{
  background-color: #373939;
  color: #f5f6f6;
}
</style>
